<template lang="html">
	<div class='idea-container'>
		<MineHeader title='反馈意见'/>
		<div @click='speackHandler' v-if='tab' class='my-speak'>
			<textarea v-model="msg" placeholder="我来说一下"></textarea>
		</div>
		
		<div class="my-idea" v-if='tab'>
			<span class="iconfont icon-weibiaoti-_huabanfuben"></span>
			<a href="#">我的反馈</a>
			<i class="iconfont icon-iconfontjiantou4"></i>
		</div>
		
		<div class="problem" v-if='tab'>
			<input type="text" placeholder="常见问题">
			<span>更多</span>
		</div>
		<div class="problem-list" vi-if='show' v-if='tab'>
			<ul>
				<li v-for='(item,index) in problemList' :key='index'>
					<span></span>
					{{ item }}
				</li>
			</ul>
		</div>
		<div v-if='tabed' class="speack-problem">
			<textarea v-model="problem" placeholder="说说你的问题"></textarea>
			<div>
				<i class="iconfont icon-Ovalx"></i>
				<i class="iconfont icon-tupian"></i>
				<span @click='submitIdea'>提交</span>
			</div>
		</div>
		<div class="submit-success" v-if='success'>
			<div>
				<h1>提交成功</h1>
				<i class="iconfont icon-chenggong"></i>
				<p>马上开通提醒,有新消息第一时间回复你</p>
			</div>
			<button @click='changeSuccess'>取消</button>
			<button @click='changeSuccess'>微信提醒</button>
		</div>
	</div>
</template>
<script>
	import MineHeader from '../../../components/mine/mineheader.vue'
	export default{
		name:'idea',
		data(){
			return{
				msg:'',
				tab:true,
				tabed:false,
				problem:'',
				success:false,
				problemList:[
					'怎么取消显示的学习动态?',
					'为什么版本更新之后,下载的视频文件不见了',
					'关于学习币',
					'如何退款',
					'退款需要多久'
				],
				submitproblem:[]
			}
		},
		components:{
			MineHeader
		},
		methods:{
			speackHandler(event){
				this.tab = false;
				this.tabed = true;
			},
			submitIdea(event){
				this.success = true;	
				this.submitproblem.push(this.problem)
				console.log(this.problem);
				console.log(this.submitproblem);
				this.problem = '';
			},
			changeSuccess(event){
				this.success = false;
			}
		},
		mounted(){
			
			this.$axios.get(this.HOST+'/problem')
			.then(data => {
				data.data.push(this.submitproblem)
				console.log(data.data)
			})
			.catch(error => {
				console.log(error)
			})
		}
	}
</script>
<style lang="less" scoped>
	.idea-container{
		width: 100%;
		height: 100%;
		position: relative;
		.my-speak{
			width:100%;
			textarea{
				width:100%;
				height: 60px;
				line-height:60px;
				text-align:center;
				background-color: #eee;
				color:#000;
			}
		}
		.my-idea{
			width: 95%;
			margin:10px auto;
			font-size: 14px;
			span{
				margin-right: 2%;
				color:#fb8c3a;
				font-size: 18px;
			}
			a{
				display: inline-block;
				width: 85%;
			}
		}
		.problem{
			// height: 30px;
			padding: 0 2.5% ;
			box-sizing: border-box;
			background-color:#eee;
			line-height: 40px;
			font-size: 14px;
			input{
				height: 40px;
			}
			span{
				display: inline-block;
				float: right;
			}
		}
		.problem-list{
			font-size: 14px;
			padding:0 2.5%;
			box-sizing: border-box;
			margin-top:10px;
			color:#000;
			ul{
				li{
					span{
						display: inline-block;
						width: 8px;
						height: 8px;
						border-radius: 50%;
						background-color: #ccc;
						margin-right: 5px;
					}
				}
			}
	}
	.speack-problem{
		width: 100%;
		background-color: #eee;
		padding: 5px 2.5%;
		box-sizing: border-box;
		textarea{
			width: 100%;
			height: 80px;
		}
		div{
			width:100%;
			height: 30px;	
			i{
				line-height: 30px;
				font-size: 16px;
				margin-right: 5px;
			}
			span{
				display: inline-block;
				float: right;
				width: 70px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border-radius: 5px;
				background-color: #3fb2fd;
			}
		}

	}
	.submit-success{
		width: 100%;
		height: 300px;
		position: absolute;
		left:0;
		top: 100%;
		text-align: center;
		div{
			border-bottom:1px solid #bcbcbc;
			h1{
				margin:15px 0;
				font-weight: normal;
				font-size: 25px;
			}
			i{
				font-size: 60px;
				color:#fb8c3a;
			}
			p{
				margin:15px 0;
			}
		}
		button{
			width: 90px;
			height: 45px;
			margin:25px 30px;
			border-radius: 10px;
			background-color: #fb8c3a;
			color:#fff;
		}
	}
}
</style>